<template>
    <div id="ProofOfIncome">
        <div v-if="dataList">
             <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                > 
                <div class="ProofOfIncome-Box" v-for="(item,index) in dataList" :key="index">
                    <div>
                        <span class="span-Money">{{item.incomeGold}}</span>
                    </div>
                    <div>
                        <span class="span-name">{{item.incomeType==1?'邀请好友':item.incomeType==2?"任务结算":item.incomeType==3?"充值":item.incomeType}}</span>
                    </div>
                    <div>
                        <span class="span-Time">{{item.incomeCreateTime|dateFmt("YYYY-MM-DD")}}</span>
                    </div>
                </div>
            </van-list>
        </div>
        <div class="ShowDiv" v-else>
            <span>暂时还未有收入记录</span>
        </div>
    </div>
</template>
<script>
import { List } from 'vant'
export default {
    name:"WithdrawDeposit",
    data() {
        return {
            ProofOfIncomeuId:"",
            WithdrawDeposit:[
                // {Money:"150",name:"任务结算",Time:"2019-10-10"},
            ],
            list: [],
            loading: false,
            finished: false,
            // ==================
            dataList:[]
        }
    },
    filters:{
        formatMoney:function(value){
            return "￥"+ value;
        },
        ProofcreateTime (createTime){
            if(!!createTime){
                return createTime.substring(0,10);
            }
            else{
                return '';
            } 
        }
    },
    computed: {
        WithdrawList(){
           return this.WithdrawDeposit.length == 0  ? false : true;
        },
    },
    created(){
        this.loadComments();
        //  监听浏览器返回
        // if (window.history && window.history.pushState) {
        //     history.pushState(null, null, document.URL);
        //     window.addEventListener('popstate', this.goBack, false);
        // }
        //获取收入记录
        this.getDataList()
    },
    
  
    methods: {
        //获取收入记录
        getDataList (){
            this.$axios.get("/cct/income/userincome",{}).then(res =>{
                console.log("获取收入记录",res)
                if(res.data.code==0){
                    this.dataList =res.data.rows;
                }
            }) 
        },
        //取出村民id
        loadComments() {
        var list = JSON.parse(localStorage.getItem("key"));
        this.MyDetailMoneyuId = list.userId;
        },
         // //浏览器点击返回跳转路径
        // goBack(){
        //         // this.$router.push("/Mymi");
        //         // this.$router.go(-1)
        //     alert("监听到了");
        //     //replace替换原路由，作用是避免回退死循环
        // }
         onLoad() {
            // 异步更新数据
            setTimeout(() => {
              if(this.list.length+10 <= this.WithdrawDeposit.length){
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.WithdrawDeposit[this.list.length]);
                    }
                    // 加载状态结束
                }
                else if(this.WithdrawDeposit.length < 10){
                    for (let i = 0; i < this.WithdrawDeposit.length; i++) {
                        this.list.push(this.WithdrawDeposit[this.list.length]);
                    }
                }
                else{
                    for (let i = 0; i < 1; i++) {
                        this.list.push(this.WithdrawDeposit[this.list.length]);
                    }
                }
                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.list.length >= this.WithdrawDeposit.length) {
                this.finished = true;
                }
            }, 500);
            // console.log(this.list)
        }
    }    

}
</script>
<style lang="less" scoped>
#ProofOfIncome{
    width: 100%;
    height: auto;
    background: rgb(248, 248, 248);
    // padding: 0.15rem 0.3rem;
    // box-sizing: border;
    .ProofOfIncome-Box{
        width: 100%;
        height: 0.92rem;
        display: flex;
        line-height: 0.92rem;
        font-size: 0;
        font-family: "PingFang-SC-Medium";
        justify-content: space-around;
        align-items: center;
        text-align: center;
        div{
            width: 100%;
            height: 0.92rem;
            text-align: center;
        }
        .span-Money{
            font-size:0.33rem; 
            color: #666666;
            float: left;
            margin-left: 0.95rem;
        }
        .span-name{
            font-size:0.29rem; 
            color: #666666;
        }
        .span-Time{
            font-size:0.21rem; 
            color: #999999;
        }
    }
    .ShowDiv{
        width: 100%;
        height: 0.92rem;
        font-size:0.24rem;
        text-align: center;
        line-height: 0.92rem;
        color: rgb(112, 95, 95);
        background: rgb(248, 248, 248);
        // background: red;
    }
}  
</style>